<template>
	<section class="login-page">
		<view class="banner">
			<img src="@/static/login/logo_title.png"  class="title"/>
		</view>
		
		<view class="con-box">
			<view class="opt">
				<text class='areaCode'>+63</text>
				<input type="tel" v-model.trim="phoneNumber" placeholder="Your phone number" />
			</view>
			
			<view class="opt">
				<input type="text" v-model.trim="smsCode" maxlength="6" placeholder="SMS code" />
				<text :class="{'con-a': n != 120}" v-text="smsCodetext" class="sms-code" @click="getSmsCode" />
			</view>
			<view class="check" :class="{'con-p': checked}" @click.self="tapAgree">I have read and agree<text @click="tapPri" class="policy">&nbsp;Privacy Policy</text></view>
			<text class="sub-login" @click="sub">Login</text>
			<view class="not-login" @click="isService = true"><text>Unable to login</text></view>
			<text class="con-span">
				Company Name:{{contactInfo.cn}}<br />
				Company Registration No. :{{contactInfo.crn}}<br />
				Certificate of Authority NO.{{contactInfo.cmn}}
			</text>
		</view>
		<service v-show="isService" ref="service" @close='isService = false'></service>
	</section>
</template>

<script>
	import service from "@/components/service";
	import {getImgCode,login,autoLogin,getXym} from "@/api/common.js"
	export default {
		data() {
			return {
				phoneNumber: '',
				smsCode: '',
				n: 120,
				smsCodetext: 'Get code',
				checked: false,
				registerSource: "",
				system: "",
				phoneBrand: "",
				userAgent:"",
				isService:false,
				canLogin: false,
				registerChannel: 'APP',
				contactInfo:{}
			}
		},
		metaInfo: {
			title: 'VIP Funpera'
		},
		components: {
			service
		},
		onLoad() {
			uni.removeStorageSync("moneyAmount");
			uni.removeStorageSync("exchangeId");
			uni.removeStorageSync("source");
			let systemInfo = uni.getSystemInfoSync();
			this.system = systemInfo.system;
			this.registerSource = systemInfo.deviceType;
			this.phoneBrand = systemInfo.deviceBrand || systemInfo.deviceModel;
			this.userAgent = systemInfo.ua
			let cToken = uni.getStorageSync("cToken");
			const cTime = uni.getStorageSync('cTime');
			const preLoginTime = cTime && new Date(cTime).toDateString(); //前一次自动登录时间
			const curLoginTime = new Date().toDateString();
			if (cToken) {
				if(!preLoginTime || preLoginTime !== curLoginTime){//判断是否同一天
					this.autoLogin()
				}
			}
			this.getContactInfo()
		},
		
		methods: {
			//获取验证码
			getSmsCode() {
				var self = this;
				var regNumber = /\d+/;
				if (!self.phoneNumber) {
					self.UTILS.logStr('Please enter your phone number');
					return;
				}
				if (regNumber.test(self.smsCodetext)) {
					return
				}
				var time = setInterval(function() {
					self.n--;
					self.smsCodetext = self.n + 's';
					if (self.n == 0) {
						self.n = 120;
						clearInterval(time);
						self.smsCodetext = 'Get code';
					}
				}, 1000);
				const params = {
					phoneNumber: self.phoneNumber,
					registerSource: self.registerSource
				}
				getImgCode(params).then(res => {
					self.UTILS.logStr(res.message);
					if (res.code != '0000') {
						self.n = 120;
						clearInterval(time);
						self.smsCodetext = 'Get code';
					}
				})
			},

			// 登录注册
			sub() {
				var self = this;
				if (!self.phoneNumber) {
					self.UTILS.logStr('Please enter your phone number');
					return;
				}
				if (!self.smsCode) {
					self.UTILS.logStr('Please enter SMS code');
					return;
				}
				if (!self.checked) {
					self.UTILS.logStr('Please read and tick the Privacy Policy.');
					return;
				}
				self.login();
			},

			//登录
			login() {
				var self = this;
				uni.removeStorageSync("cToken");
				const params = {
					phoneNumber: self.phoneNumber,
					vcode: self.smsCode,
					registerChannel: self.registerChannel,
					registerSource: self.registerSource,
					system: self.system,
					phoneBrand: self.phoneBrand,
					userAgent:self.userAgent,
					deviceId: uni.getStorageSync("deviceId")
				}
				login(params).then(res => {
					if (res.code == '0000') {
						uni.setStorageSync('cTime', new Date());
						uni.setStorageSync('cToken', res.data);
						uni.removeStorageSync('canLogin');
						uni.reLaunch({
							url:'/pages/home/index',
							animationType: 'pop-in',
							animationDuration: 200
						})
					} else {
						self.UTILS.logStr(res.message);
					}
				})
			},

			// 自动登录
			autoLogin() {
				var self = this;
				const params = {
					deviceId: uni.getStorageSync("deviceId")
				}
				autoLogin(params).then(res => {
					if (res.code == '0000') {
						if(res.data){
							uni.setStorageSync('cToken', res.data)
							uni.setStorageSync('cTime', new Date());
							uni.removeStorageSync('canLogin')
							uni.reLaunch({
								url:'/pages/home/index',
								animationType: 'pop-in',
								animationDuration: 200
							})
						}
						else{
							uni.removeStorageSync('cToken');
							uni.removeStorageSync('cTime');
						}
					} else {
						uni.removeStorageSync('cToken');
						uni.removeStorageSync('cTime');
						self.UTILS.logStr(res.message);
					}
				})
			},
			
			//获取联系方式
			getContactInfo() {
				const webUrl = uni.getStorageSync('webUrl') || this.COFIG?.staticUrl;
				const params = {
					ym: webUrl,
					deviceId: uni.getStorageSync("deviceId")
				}
				getXym(params).then(res => {
					if (res.code == '0000') {
						this.contactInfo = res.data
					}
				})
			},
			
			//app点击阅读协议
			tapAgree(){
				var self = this;
				const canLogin = uni.getStorageSync("canLogin");
				if(canLogin){
					self.checked = !self.checked;
				}else{
					self.tapPri();
				}
			},
			
			//点击协议
			tapPri(){
				uni.navigateTo({
					url:'/pages/privacy/index',
					animationType: 'pop-in',
					animationDuration: 200
				})
			}
		}
	}
</script>


<style scoped lang="scss">
	.login-page {
		width: 100%;
		min-height: 100%;
		padding-top: 100rpx;
		background: url("@/static/login/login_bg.png") no-repeat center;
		background-size: 100% 100%;
		margin: 0 auto;
		box-sizing: border-box;
		.banner{
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 120rpx;
			.title{
				width: 90%;
			}
		}
		.con-box {
			width: 85%;
			margin: 0 auto;
		}
		.opt {
			display: flex;
			align-items: center;
			height: 110rpx;
			background-color: #F6F6F6;
			border-radius: 10rpx;
			padding-left: 50rpx;
			padding-right: 20rpx;
			margin-top: 46rpx;
			input {
				flex: 1;
				height: 110rpx;
				font-size: 34rpx;
				color: #040507;
				border: none;
				background: none;
			}
			.areaCode{
				margin-right: 8rpx;
				font-style: normal;
				font-size: 36rpx;
				line-height: 40rpx;
				text-align: center;
				color: #000000;
			}
			.sms-code{
				padding: 12rpx 16rpx;
				font-size: 28rpx;
				color: #FFF;
				border-radius: 10rpx;
				background: #FF6311;
			}
			.con-a {
				background-color: #6F6F6F;
			}
		}
		.opt:first-of-type{
			margin-top: 0;
		}
		
		.con-p {
			background: url("@/static/login/checked.png") no-repeat left center;
			background-size: 42rpx 42rpx;
		}
		.policy {
			color: #0018D0;
		}
		.check {
			margin-top: 20rpx;
			padding-left: 58rpx;
			font-size: 30rpx;
			color: #FFF;
			background: url("@/static/login/check.png") no-repeat left center;
			background-size: 48rpx 48rpx;
		}
		
		.con-span {
			line-height: 38rpx;
			text-align: center;
			font-size: 26rpx;
			color: #FFF;
			display: block;
			margin: 120rpx auto 30rpx auto;
		}
		.sub-login {
			display: block;
			width: 408rpx;
			height: 88rpx;
			margin: 80rpx auto 0 auto;
			background: url("@/static/login/login.png") no-repeat center;
			background-size: 100%;
			text-align: center;
			font-size: 40rpx;
			font-weight: 900;
			line-height: 80rpx;
			color: #FFFFFF;
		}
		.not-login{
			text-align: center;
			font-size: 28rpx;
			margin-top: 40rpx;
			font-weight: 600;
			color: #FFFFFF;
			text{
				border-bottom: 1px solid #fff;
				font-style: normal;
				padding-bottom: 4rpx;
			}
		}
	}
</style>
